<template>
  <div>
    <h1>首页</h1>
    <!-- 按钮 -->
    <div class="optionButton">
      <el-select @change="changeData">
        <el-option label="日" value="day"></el-option>
        <el-option label="月" value="month"></el-option>
        <el-option label="年" value="year"></el-option>
      </el-select>
    </div>
    <div ref="chart" style="width: 600px; height: 400px;"></div>
    <div class="optionButton" style="float: right;margin-top: -415px">
      <el-select @change="changeCombo">
        <el-option label="日" value="day"></el-option>
        <el-option label="月" value="month"></el-option>
        <el-option label="年" value="year"></el-option>
        <el-option label="近七日" value="seven"></el-option>
      </el-select>
    </div>
    <div ref="combo" style="width: 600px; height: 400px;float: right;margin-top: -400px"></div>
  </div>
</template>
<script setup>
import {getDepositInfo} from "@/api/changebattery/userManager";
import * as echarts from 'echarts'
import { onMounted, ref } from 'vue'


const chart = ref()
const combo = ref()

const item =ref('mouth')
const chartItem =ref('day')

const changeCombo = async  (a) =>{
  item.value=a
  await fetchData(item.value)
  // alert(item.value)
}
const changeData = async (a) =>{
  chartItem.value=a
  await fetchData(chartItem.value)
}

onMounted(async () => {
  await fetchData()
})

const fetchData = async () => {
  const { data } = await getDepositInfo(item.value,chartItem.value)
  setChartOption(data.depositInfo.orderdates, data.depositInfo.ordercounts)
  setCombo(data.comboInfo.months, data.comboInfo.bigDecimals)
}

//柱状
const setChartOption = (dateList, amountList) => {
  const myChart = echarts.init(chart.value)
  // 指定图表的配置项和数据
  const option = {
    title: {
      text: '退还押金统计',
    },
    tooltip: {},
    legend: {
      data: ['退还人数'],
    },
    xAxis: {
      data: dateList,
    },
    yAxis: {},
    series: [
      {
        name: '每日退还人数',
        type: 'bar',
        data: amountList,
      },
    ],
  }
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option)
}

// 折线
const setCombo = ( months,bigDecimals) => {

// 基于准备好的dom，初始化echarts实例
  const myChart = echarts.init(combo.value)
// 指定图表的配置项和数据
  var option = {
    title: {
      text: '每月套餐总额统计',
    },
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['线1', '线2']
    },
    xAxis: {
      type: 'category',
      data: months,
    },
    yAxis: {
      type: 'value'
    },
    series: [{
      name: '套餐总额',
      type: 'line',
      data: bigDecimals
    }]
  };

// 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);

}
</script>



<style scoped>

</style>
